{{ define "content" }}
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_content">
                <div role="tabpanel">
                    <ul class="nav nav-tabs bar_tabs" role="tablist">
                        <li role="presentation"{{ if eq .action "" }} class="active"{{ end }}><a href="{{ if eq .action "" }}javascript:void(0);{{ else }}{{ .Request.URL.Path }}{{ end }}">{{ i18n "Preview" . }}</a></li>
                        <li role="presentation"{{ if eq .action "image" }} class="active"{{ end }}><a href="{{ if eq .action "image" }}javascript:void(0);{{ else }}{{ .Request.URL.Path }}?action=image{{ end }}">{{ i18n "Image" . }}</a></li>
                        <li role="presentation"{{ if eq .action "system" }} class="active"{{ end }}><a href="{{ if eq .action "system" }}javascript:void(0);{{ else }}{{ .Request.URL.Path }}?action=system{{ end }}">{{ i18n "System" . }}</a></li>
                        {{ if .events_enabled }}<li role="presentation"{{ if eq .action "notification" }} class="active"{{ end }}><a href="{{ if eq .action "notification" }}javascript:void(0);{{ else }}{{ .Request.URL.Path }}?action=notification{{ end }}">{{ i18n "Notification" . }}</a></li>{{ end }}
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane fade active in">
                        {{ if eq .action "image" }}
                            {{ range $i, $channel := .channels }}
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <img src="{{ $.Request.URL.Path }}?action=preview&channel=10{{ $channel.ID }}" width="100%" height="100%" id="preview" />
                                </div>
                                <div class="col-md-7 col-sm-7 col-xs-12">
                                    <form role="form" data-toggle="validator" id="image-settings" action="{{ $.Request.URL.Path }}?action=image" method="post">
                                        {{ if $channel.IrcutFilterType }}
                                        <div class="accordion" id="image-accordion" role="tablist" aria-multiselectable="true">
                                            <div class="panel">
                                                <a class="panel-heading" role="tab" id="image-accordion-switch" data-toggle="collapse" data-parent="#image-accordion" href="#image-collapse-switch" aria-expanded="true" aria-controls="image-collapse-switch">
                                                    <h4 class="panel-title">{{ i18n "Day/Night switch" $ }}</h4>
                                                </a>
                                                <div id="image-collapse-switch" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="image-accordion-switch">
                                                    <div class="panel-body">
                                                        <label for="ir-cut-filter-type">
                                                            {{ i18n "Day/Night switch" $ }} <span class="required">*</span>
                                                        </label>
                                                        <select id="ir-cut-filter-type" class="form-control select2" required="required">
                                                            <option value="day"{{ if eq $channel.IrcutFilterType "day" }} selected="selected"{{ end }}>{{ i18n "Day" $ }}</option>
                                                            <option value="night"{{ if eq $channel.IrcutFilterType "night" }} selected="selected"{{ end }}>{{ i18n "Night" $ }}</option>
                                                            <option value="auto"{{ if eq $channel.IrcutFilterType "auto" }} selected="selected"{{ end }}>{{ i18n "Auto" $ }}</option>
                                                            <option value="schedule"{{ if eq $channel.IrcutFilterType "schedule" }} selected="selected"{{ end }}>{{ i18n "Schedule" $ }}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="panel">
                                                <a class="panel-heading" role="tab" id="image-accordion-flip" data-toggle="collapse" data-parent="#image-accordion" href="#image-collapse-flip" aria-expanded="true" aria-controls="image-collapse-flip">
                                                    <h4 class="panel-title">{{ i18n "Flip" $ }}</h4>
                                                </a>
                                                <div id="image-collapse-flip" class="panel-collapse collapse" role="tabpanel" aria-labelledby="image-accordion-flip">
                                                    <div class="panel-body">
                                                        <label for="flip">
                                                            {{ i18n "Flip" $ }} <span class="required">*</span>
                                                        </label>
                                                        <select id="flip" class="form-control select2" required="required">
                                                            <option value="disabled"{{ if not $channel.ImageFlipEnabled }} selected="selected"{{ end }}>{{ i18n "Disabled" $ }}</option>
                                                            <option value="LEFTRIGHT"{{ if eq $channel.ImageFlipStyle "LEFTRIGHT" }} selected="selected"{{ end }}>{{ i18n "Left / right" $ }}</option>
                                                            <option value="UPDOWN"{{ if eq $channel.ImageFlipStyle "UPDOWN" }} selected="selected"{{ end }}>{{ i18n "Up / down" $ }}</option>
                                                            <option value="CENTER"{{ if eq $channel.ImageFlipStyle "CENTER" }} selected="selected"{{ end }}>{{ i18n "Center" $ }}</option>
                                                            <!--<option value="AUTO"{{ if eq $channel.ImageFlipStyle "AUTO" }} selected="selected"{{ end }}>{{ i18n "Auto" $ }}</option>-->
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--
                                            <div class="panel">
                                                <a class="panel-heading collapsed" role="tab" id="image-accordion-other" data-toggle="collapse" data-parent="#image-accordion" href="#image-collapse-other" aria-expanded="false" aria-controls="image-collapse-other">
                                                    <h4 class="panel-title">Collapsible Group Items #2</h4>
                                                </a>
                                                <div id="image-collapse-other" class="panel-collapse collapse" role="tabpanel" aria-labelledby="image-accordion-other">
                                                    <div class="panel-body">
                                                        <p><strong>Collapsible Item 2 data</strong>
                                                        </p>
                                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
                                                    </div>
                                                </div>
                                            </div>
                                            -->
                                        </div>
                                        {{ end }}
                                    </form>
                                </div>
                            {{ end }}
                        {{ else if eq .action "system" }}
                            {{ if .info }}
                                <div class="x_title">
                                    <h2>{{ i18n "Basic information" . }}</h2>
                                    <div class="clearfix"></div>
                                </div>

                                <table class="table table-striped datatable dt-responsive nowrap" style="width:100%">
                                    <thead>
                                    <tr>
                                        <th class="col-md-4">{{ i18n "Parameter" . }}</th>
                                        <th>{{ i18n "Value" . }}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>{{ i18n "Device name" . }}</td>
                                            <td>{{ .info.DeviceName }}</td>
                                        </tr>
                                        <tr>
                                            <td>{{ i18n "Device number" . }}</td>
                                            <td>{{ .info.TelecontrolID }}</td>
                                        </tr>
                                        <tr>
                                            <td>{{ i18n "Model" . }}</td>
                                            <td>{{ .info.Model }}</td>
                                        </tr>
                                        <tr>
                                            <td>{{ i18n "Serial number" . }}</td>
                                            <td>{{ .info.SerialNumber }}</td>
                                        </tr>
                                        <tr>
                                            <td>{{ i18n "Firmware version" . }}</td>
                                            <td>{{ .info.FirmwareVersion }} {{ .info.FirmwareReleasedDate }}</td>
                                        </tr>
                                        {{ if ne .info.FirmwareVersionInfo "" }}
                                        <tr>
                                            <td>{{ i18n "Firmware version info" . }}</td>
                                            <td>{{ .info.FirmwareVersionInfo }}</td>
                                        </tr>
                                        {{ end }}
                                        <tr>
                                            <td>{{ i18n "Encoder version" . }}</td>
                                            <td>{{ .info.EncoderVersion }} {{ .info.EncoderReleasedDate }}</td>
                                        </tr>
                                        {{ if ne .info.DecoderVersion "" }}
                                        <tr>
                                            <td>{{ i18n "Decoder version" . }}</td>
                                            <td>{{ .info.DecoderVersion }} {{ .info.DecoderReleasedDate }}</td>
                                        </tr>
                                        {{ end }}
                                        {{ if ne .info.BootVersion "" }}
                                        <tr>
                                            <td>{{ i18n "Boot version" . }}</td>
                                            <td>{{ .info.BootVersion }} {{ .info.BootReleasedDate }}</td>
                                        </tr>
                                        {{ end }}
                                        <tr>
                                            <td>{{ i18n "Device ID" . }}</td>
                                            <td>{{ .info.DeviceID }}</td>
                                        </tr>
                                        {{ if ne .info.DeviceDescription "" }}
                                        <tr>
                                            <td>{{ i18n "Device description" . }}</td>
                                            <td>{{ .info.DeviceDescription }}</td>
                                        </tr>
                                        {{ end }}
                                        {{ if ne .info.DeviceLocation "" }}
                                        <tr>
                                            <td>{{ i18n "Device location" . }}</td>
                                            <td>{{ .info.DeviceLocation }}</td>
                                        </tr>
                                        {{ end }}
                                        {{ if ne .info.SystemContact "" }}
                                        <tr>
                                            <td>{{ i18n "System contact" . }}</td>
                                            <td>{{ .info.SystemContact }}</td>
                                        </tr>
                                        {{ end }}
                                        <tr>
                                            <td>{{ i18n "Mac address" . }}</td>
                                            <td>{{ .info.MacAddress }}</td>
                                        </tr>
                                        {{ if ne .info.HardwareVersion "" }}
                                        <tr>
                                            <td>{{ i18n "Hardware version" . }}</td>
                                            <td>{{ .info.HardwareVersion }}</td>
                                        </tr>
                                        {{ end }}
                                        <tr>
                                            <td>{{ i18n "Device type" . }}</td>
                                            <td>{{ .info.DeviceType }}</td>
                                        </tr>
                                        <tr>
                                            <td>{{ i18n "Support beep" . }}</td>
                                            <td>{{ .info.SupportBeep }}</td>
                                        </tr>
                                        <tr>
                                            <td>{{ i18n "Support video loss" . }}</td>
                                            <td>{{ .info.SupportVideoLoss }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            {{ end }}

                            {{ if .upgrade }}
                                <div class="x_title">
                                    <h2>{{ i18n "Update firmware" . }}</h2>
                                    <div class="clearfix"></div>
                                </div>

                                {{ if .upgrade.Upgrading }}
                                    <div class="progress" style="margin-bottom:0">
                                        <div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" aria-valuenow="{{ .upgrade.Percent }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ .upgrade.Percent }}%">
                                            <span style="line-height:20px">{{ .upgrade.Percent }}%</span>
                                        </div>
                                    </div>
                                {{ else }}
                                    <form class="form-horizontal form-label-left dropzone" role="form" method="post" id="firmware" action="?action=system" novalidate></form>
                                {{ end }}
                            {{ end }}
                        {{ else if and .events_enabled (eq .action "notification") }}
                            <form role="form" data-toggle="validator" id="notification-settings" action="{{ $.Request.URL.Path }}?action=notification" method="post" class="form-horizontal form-label-left">
                                <div class="form-group">
                                    <label for="url" class="control-label col-md-3 col-sm-3 col-xs-12">
                                        {{ i18n "URL" . }}
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="text" class="form-control" name="url" id="url" required
                                            placeholder="{{ .Request.URL.Path }}?action=event{{ if ge (len .access_key) 0 }}&key={{ .access_key }}{{ end }}"
                                            value="{{ .notification.url }}" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="address-format" class="control-label col-md-3 col-sm-3 col-xs-12">
                                        {{ i18n "Address format" . }}
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <select id="address-format" name="address-format" class="form-control select2" required="required">
                                            <option value="ipaddress" {{ if eq .notification.address_format "ipaddress" }} selected="selected"{{ end }}>{{ i18n "By IP address" $ }}</option>
                                            <option value="hostname" {{ if eq .notification.address_format "hostname" }} selected="selected"{{ end }}>{{ i18n "By hostname" $ }}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="hostname" class="control-label col-md-3 col-sm-3 col-xs-12">
                                        {{ i18n "Hostname" . }}
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="text" class="form-control" name="hostname" id="hostname"
                                            placeholder="{{ config "dashboard.host" }}"
                                            value="{{ .notification.hostname }}" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="ip" class="control-label col-md-3 col-sm-3 col-xs-12">
                                        {{ i18n "IP address" . }}
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="text" class="form-control" name="ip" id="ip"
                                            placeholder="0.0.0.0"
                                            value="{{ .notification.ip_address }}" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="port" class="control-label col-md-3 col-sm-3 col-xs-12">
                                        {{ i18n "Port" . }}
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="text" class="form-control" name="port" id="port" required
                                            placeholder="{{ config "dashboard.port" }}"
                                            value="{{ .notification.port }}" />
                                    </div>
                                </div>
                                <div class="ln_solid"></div>
                                <div class="form-group">
                                    <div class="col-md-6 col-md-offset-3">
                                        <button type="submit" class="btn btn-success">{{ i18n "Apply" . }}</button>
                                    </div>
                                </div>
                            </form>
                        {{ else }}
                            <div class="form-group pull-right">
                                <div class="input-group">
                                    <label class="btn-group">
                                        <button type="button" class="btn btn-icon btn-info btn-sm" onclick="previewRefresh()">
                                            <i class="fas fa-sync" title="{{ i18n "Refresh" . }}"></i>
                                        </button>
                                        <a href="{{ .Request.URL.Path }}?action=preview&download=1" class="btn btn-icon btn-info btn-sm">
                                            <i class="fas fa-download" title="{{ i18n "Download" . }}"></i>
                                        </a>
                                    </label>
                                </div>
                            </div>
                            <img src="{{ .Request.URL.Path }}?action=preview" width="100%" height="100%" id="preview" />
                        {{ end }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{ end }}

{{ define "head" }}
    {{ if eq .action "system" }}
        {{ staticHTML (staticURL "/dashboard/assets/vendors/dropzonejs/css/dropzone.min.css" false) }}
    {{ end }}
{{ end }}

{{ define "js" }}
    {{ if eq .action "image" }}
        {{ staticHTML (staticURL "/dashboard/assets/vendors/validator/js/validator.min.js" false) }}
    {{ else if eq .action "system" }}
        {{ staticHTML (staticURL "/dashboard/assets/vendors/dropzonejs/js/dropzone.min.js" false) }}

        <script type="application/javascript">
            $(document).ready(function () {
                Dropzone.options.firmware = {
                    parallelUploads: 1,
                    paramName: "firmware",
                    createImageThumbnails: false,
                    acceptedFiles: "application/octet-stream,.dav"
                };
            });
        </script>
    {{ end }}

    <script type="application/javascript">
        window.previewRefresh = function() {
            $('#preview').attr('src', '{{ .Request.URL.Path }}?action=preview&_t='+(new Date()).getTime());
        };

        $('#preview').ready(function () {
            window.setInterval(window.previewRefresh, {{ .preview_refresh_interval }} * 1000);
        });

        $(document).ready(function () {
            $('#image-settings input[id], #image-settings select, #image-settings textarea[id]').change(function() {
                var
                        e = $(this),
                        data = {},
                        k = e.prop('id')
                ;

                if (e.prop('type') === 'checkbox') {
                    data[k] = e.prop('checked') != '';
                } else {
                    data[k] = e.val()
                }

                $.ajax({
                    type: $('#image-settings').prop('method'),
                    url: $('#image-settings').prop('action'),
                    data: data,
                    success: function (r) {
                        if (r.result === 'failed') {
                            new PNotify({
                                title: 'Error',
                                text: r.message,
                                type: 'error',
                                styling: 'bootstrap3'
                            });
                        } else if (r.message !== 'undefined') {
                            new PNotify({
                                title: 'Success',
                                text: r.message,
                                type: 'success',
                                styling: 'bootstrap3'
                            });
                        }
                    }
                });
            });
        });
    </script>
{{ end }}